<template>
    <div class='wrapper'>
     <swiper :options='swiperOpt' v-if="pages.length > 0">
       <swiper-slide v-for="(p,index) of pages" :key='index'>
        <div class='ico-block' v-for="item of p" :key="item.id">
         <div class='ico'>
           <img class='img' :src='item.imgUrl'/>
         </div>
         <p class='desc'>{{item.desc}}</p>
        </div>
       </swiper-slide>
       <!-- <swiper-slide>
        <div class='ico-block'>
         <div class='ico'>
           <img class='img' src='//s.qunarzz.com/homenode/images/touchheader/flight.png'/>
         </div>
         <p class='desc'>景点描述6988</p>
        </div>
       </swiper-slide> -->
     </swiper>
    </div>
</template>

<script>
export default {
  components: {},
  name: 'icons',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOpt: {
        loop: true,
        autoplay: false
      }
    }
  },
  computed: {
    pages () {
      let pages = []
      this.list.forEach((item, index) => {
        let page = Math.floor(index / 8)
        typeof pages[page] !== 'undefined' ? console.log() : pages[page] = []
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
    .wrapper
        margin-top :.4rem
        overflow :hidden
        height :0
        padding-bottom :50%
        .ico-block
            position:relative
            width :25%
            padding-bottom :25%
            overflow :hidden
            float :left
            height :0
            .desc
             font-size :15px
             position :absolute
             left :0
             right :0
             bottom :0
             height :.44rem
             lin-height :.44rem
             color :$darkTextColor
             text-align :center
             ellipsis()
            .ico
             position:absolute
             top:0
             right :0
             left :0
             bottom :.44rem
             box-sizing :border-box
             padding-left :.2rem
             .img
               height :100%
               margin :0 auto
</style>
